<template>
  <view class="searchCardWrapper">
    <view class="cardTitle">
      <img :src="adv_title_icon" class="adv_title_icon" alt="" />
    </view>
    <view class="cardContainer">
      <view class="cardSearchInput">
        <inputSearchVue :searchType="searchType" />
      </view>
      <view :class="{ tableContainer: true, searchJob: isSearchJob }">
        <view class="cardTable highSalary">
          <view class="titleBg">
            <view class="tableBigTitle">
              {{ tableBigTitleOne }}
            </view>
            <view class="tableSmallTitle tr">
              <view class="smallTitleItem th">排行</view>
              <view class="smallTitleItem th">{{ label }}</view>
              <view class="smallTitleItem th">平均薪酬</view>
            </view>
          </view>
          <view
            class="tableRow"
            v-for="(item, index) in tableData1st"
            :key="index"
            @click="handleTableRowClick(item)"
          >
            <view class="tableColumn">{{ index + 1 }}</view>
            <view class="tableColumn">{{ item.title }}</view>
            <view class="tableColumn">{{ item.content }}元</view>
          </view>
        </view>
        <!-- <view class="cardTable highJob">
          <view class="titleBg">
            <view class="tableBigTitle">
              {{tableBigTitleTwo}}
            </view>
            <view class="tableSmallTitle tr">
              <view class="smallTitleItem th">排行</view>
              <view class="smallTitleItem th">{{label}}</view>
              <view class="smallTitleItem th">{{columnDesc}}</view>
            </view>
          </view>
          <view class="tableRow" v-for="item,index in tableData2nd" :key="index" @click="handleTableRowClick(item)">
            <view class="tableColumn">{{index+1}}</view>
            <view class="tableColumn">{{item.title}}</view>
            <view class="tableColumn">{{item.content}}</view>
          </view>
        </view> -->
        <view
          class="vocationalAssessmentEntrance"
          v-if="isSearchJob"
          @click="handleEntranceClick"
        >
          <img :src="vocationalAssessmentEntrance" alt="" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  positionTagAndParentList,
  getStudentHotSearchList
} from '@/api/modules/positionDictionary.js';
import {
  matchPositionListNew,
  addBuryingPoint,
  getPositionTemplate
} from '@/api/modules/career.js';
import inputSearchVue from './inputSearch.vue';
export default {
  components: {
    inputSearchVue
  },
  props: {
    isSearchJob: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    isSearchJob: {
      handler(newValue, oldValue) {
        if (newValue) {
          //是查职业
          this.label = '职业';
          this.tableBigTitleOne = '热门职业';
          this.tableBigTitleTwo = '新兴职业';
          this.columnDesc = '潜力值';
          this.adv_title_icon =
            this.$imgBaseSelf +
            'career/positionDictionary/adv_job_title_icon.png';
          this.searchType = 2;
        } else {
          //查专业
          this.searchType = 1;
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      isIOS: uni.getSystemInfoSync().platform == 'ios',
      searchType: 1,
      requestMethod: '',
      tableData1st: [],
      tableData2nd: [],
      tableBigTitleOne: '热门专业',
      tableBigTitleTwo: '高就业率专业',
      label: '专业',
      columnDesc: '就业率',
      adv_title_icon:
        this.$imgBaseSelf +
        'career/positionDictionary/adv_major_title_icon.png',
      vocationalAssessmentEntrance:
        this.$imgBaseSelf +
        'career/positionDictionary/vocationalAssessmentEntrance.png',
      buryingPointId: '',
      cardType: ''
    };
  },
  onLoad(opt) {},
  created() {
    if (this.isSearchJob) {
      this.requestMethod = matchPositionListNew;
      this.reqGetStudentHotSearchList(12, 'tableData1st');
      this.reqGetStudentHotSearchList(11, 'tableData2nd');
    } else {
      this.requestMethod = positionTagAndParentList;
      this.reqGetStudentHotSearchList(22, 'tableData1st');
      this.reqGetStudentHotSearchList(21, 'tableData2nd');
    }
  },
  methods: {
    //普通的埋点+事件停留埋点
    async addBuryingPointFn(
      etId,
      statType,
      jumpPersonId,
      jumpSource,
      sourceType
    ) {
      const params = {
        etId: etId,
        id: this.buryingPointId ? this.buryingPointId : '', //后台要求不能传空，未登录也要统计
        personId: uni.getStorageSync('person-id').slice(2) || '0',
        cardType: this.cardType
          ? this.cardType
          : uni.getStorageSync('cardType') || this.cardType,
        consultantId: uni.getStorageSync('sellId')
          ? uni.getStorageSync('sellId')
          : '',
        originType: this.originFrom == 'shareLink' ? 10 : 20,
        statType: statType ? statType : '10',
        jumpPersonId: jumpPersonId,
        jumpSource: jumpSource,
        sourceType: sourceType
      };
      const res = await addBuryingPoint(params);
    },
    async handleTableRowClick(item) {
      console.log('handleTableRowClick item', item);
      // return;
      let url = '';
      switch (this.isSearchJob) {
        case false:
          //  埋点统计访问次数
          this.addBuryingPointFn(20043, '', '', '', '');
          url = `/pagesSub/careerNew/majorDetail/index?positionTagId=${item.dataId}`;
          break;
        case true:
          //  埋点统计访问次数
          this.addBuryingPointFn(20092, '', '', '', ''); //热门职业
          let params = `positionName=${item.title}&positionId=${
            item.dataId
          }&parentTitle=${item.parentTitle || ''}&topTitle=${
            item.topTitle || ''
          }`;
          //请求接口看是否走新页面
          const templateId = await this.getPositionTemplateFn(item.dataId);
          if (templateId == 6) {
            url = `/pagesSub/careerNewPositionDictionary/positionDetail?${params}`;
          } else {
            url = `/pagesSub/careerNew/positionDictionary/positionDetail?${params}`;
          }
          // url = `/pagesSub/careerNew/positionDictionary/positionDetail?${params}`;

          break;

        default:
          break;
      }
      uni.navigateTo({
        url: url
      });
    },
    async getPositionTemplateFn(positionId) {
      const res = await getPositionTemplate({ positionId: positionId });
      if (res.code == 200) {
        return res.data.templateId;
      } else {
        return 0;
      }
    },
    reqGetStudentHotSearchList(searchDataType, prop) {
      const params = {
        searchDataType //查询类型   12 高薪职业 11新兴职业 22 高薪专业 21 高就业率专业排名  30 查询平均薪酬职业
      };
      getStudentHotSearchList(params)
        .then((res) => {
          if (res.code == 200) {
            this[prop] = res.data;
            this.$emit('getElementPositions');
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    handleEntranceClick() {
      //  埋点统计访问次数
      this.addBuryingPointFn(20059, '', '', '', '');
      wx.reportEvent('college_advertise_career_measure_click', {}); //营销页—职业测评
      uni.navigateTo({
        url: '/pagesSub/career/activity/vocationalAssessment?fromWhere=junior'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.searchCardWrapper {
  .cardTitle {
    display: flex;
    justify-content: center;
    width: 100%;
    .adv_title_icon {
      width: 270.9rpx;
      height: 71rpx;
    }
  }
  .cardContainer {
    width: 674rpx;
    // height: 1019rpx;
    border-image: linear-gradient(180deg, #00e7ff, #0a6cff) 4 4;
    border-radius: 24rpx;
    box-shadow: 0 0 0 4rpx #00e7ff, 0 0 0 8rpx #0a6cff;
    padding: 34rpx 34rpx 44rpx;
    .cardSearchInput {
      // width: 514rpx;
      // margin: 0 auto;
      margin-bottom: 42rpx;
    }
    .tableContainer {
      .cardTable {
        border-radius: 20rpx;
        box-shadow: 0 0 0 4rpx #00e7ff, 0 0 0 8rpx #7bd7fe;
        margin-bottom: 29rpx;
        &:last-of-type {
          margin-bottom: 0rpx;
        }
        .titleBg {
          width: 100%;
          // height: 115rpx;
          background: linear-gradient(0deg, #7bd7fe 0%, #407bfc 99%);
          border-radius: 20rpx 20rpx 0 0;
        }
        .tr {
          display: flex;
        }
        .th:nth-of-type(2) {
          flex: 1;
        }
        .tableBigTitle {
          width: 100%;
          padding: 26rpx 0 18rpx;
          color: #affbfb;
          font-size: 30rpx;
          text-align: center;
          font-weight: bold;
        }
        .tableSmallTitle {
          width: 100%;
          // padding: 16rpx 0 18rpx;
          color: #affbfb;
          font-size: 25rpx;
          text-align: center;
          font-weight: bold;
          .smallTitleItem {
            color: white;
            padding: 15rpx 0;
            border: 3rpx solid #83c8ff;
          }
          .smallTitleItem:nth-of-type(1) {
            width: 134rpx;
          }
          .smallTitleItem:nth-of-type(3) {
            width: 180rpx;
          }
        }
        .tableRow {
          display: flex;
          background-color: white;
          &:last-of-type {
            border-radius: 0 0 20rpx 20rpx;
          }
          .tableColumn {
            border: 3rpx solid #83c8ff;
            font-family: MiSans;
            font-weight: 500;
            font-size: 24rpx;
            color: #0464ee;
            line-height: 56rpx;
            padding: 15rpx 0;
            border: 3rpx solid #83c8ff;
            text-align: center;
          }

          .tableColumn:nth-of-type(1) {
            width: 134rpx;
          }
          .tableColumn:nth-of-type(2) {
            flex: 1;
          }
          .tableColumn:nth-of-type(3) {
            width: 180rpx;
          }
        }
      }
      .vocationalAssessmentEntrance {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 51rpx;
        & > img {
          width: 597rpx;
          height: 83rpx;
        }
      }
      //搜职业的时候一些样式差异
      &.searchJob {
        .titleBg {
          background: linear-gradient(0deg, #bfe0a1 0%, #0094fb 99%);
        }
        .tableRow {
          .tableColumn {
            color: #f9823f;
          }
        }
      }
    }
  }
}
</style>
